<script setup lang="ts">
const props = defineProps(['data'])
import learned from '../../assets/checked.png';
import learning from '../../assets/learning.png';
import resultGood from '../../assets/qualified.png';
import resultBad from '../../assets/unqualified.png';
const getBtnStr = (learned:boolean):string => {
  return learned ? '已完成' : '开始考试'
}

function getLearnIcon(haveLearned:bool):string{
  return  haveLearned?learned:learning;
}

///获取结果图片
function getResult(haveLearned:bool):string{
  return  haveLearned?resultBad:resultGood;
}

</script>

<template>
  <div style="display: flex;flex-wrap: wrap;gap: 20px;margin-top: 20px">
    <div v-for="(elment,index) in props.data"  style="position: relative">
    <div class="main_body_class_style" :class="{'main_body_class_un_style':elment.learned}" style="position: relative" :key="index">
      <div style="display: flex;flex-direction: column;justify-content: center;align-items: center">
        <img :src='getLearnIcon(elment.learned)' style="width: 40px;height: 40px;">
        <div style="font-weight: bold">{{elment.title}}</div>
      </div>
      <div style="height: 20px"></div>
      <div class="frame_style" :class="{'frame_style_un':elment.learned}">
        <div style="text-align: start" :key="index">考试日期：</div>
        <div style="text-align: start" :key="index">考试时间：</div>
        <div style="text-align: start" :key="index">考试数量：</div>
      </div>
      <span style="margin-top: 20px">{{elment.content}}</span>

      <div class="style_small">
        <div v-if="!elment.learned" class="btnStyle" :class="{'unBtnStyle':elment.learned}">
          {{ getBtnStr(elment.learned) }}
        </div>
      </div>
      </div>
      <div v-if="elment.learned">
      <div style="position: absolute; left: 10px; bottom: 10px;">
        <img :src="getResult(elment.learned)" style="width: 80px;height: 80px;">
      </div>
      <div style="position: absolute; left: 100px;bottom: 10px;font-size: 24px">
       58分
      </div>
      <div  class="btnStyle" :class="{'unBtnStyle':elment.learned}" style="right: 10px;bottom:10px;position: absolute">
        {{ getBtnStr(elment.learned) }}
      </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.frame_style{
  border-radius: 6px;
  background-color: #FFFFFF;
  height: 185px;
  border: 1px solid #C5DDFE;
  padding: 10px
}

.frame_style_un{
  border: 1px solid #DBDBDB;
}
.style_small{
  display: flex;
  justify-content: center;
  margin-top: 20px;
  align-items: center;
  cursor: pointer;/*鼠标移动上去是手型*/
}
.main_body_class_style{
  width: 290px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: 317px;
  background: url('../../assets/line_big_frame.png'),
  linear-gradient( 180deg, #E7FAF9 100%, #C1F4F2 100%);
  background-size: cover; /* 让背景图片覆盖整个容器 */
  background-position: center; /* 居中背景图片 */
  background-repeat: no-repeat; /* 不重复背景图片 */
  border-radius: 6px;
}
.main_body_class_un_style{
  background: url('../../assets/line_big_frame.png'),
  linear-gradient( 180deg, #F2F2F2 100%, #E0E0E0 100%);
}
.btnStyle{
  padding: 6px 10px;
  width: 65px;
  height: 32px;
  background: #2EC3BD;
  border-radius: 6px 6px 6px 6px;
  align-items: center;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  text-align: center;
}

.unBtnStyle{
  background: linear-gradient(to right,#AEAEAE,#737373);
}
</style>